<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>系统登陆</title>
    <meta name="description" content="这是一个 index 页面">
    <meta name="keywords" content="index">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link rel="icon" type="image/png" href="/assets/i/favicon.png">
    <link rel="apple-touch-icon-precomposed" href="/assets/i/app-icon72x72@2x.png">
    <meta name="apple-mobile-web-app-title" content="Amaze UI" />
    <link rel="stylesheet" href="/assets/css/amazeui.min.css" />
    <link rel="stylesheet" href="/assets/css/amazeui.datatables.min.css" />
    <link rel="stylesheet" href="/assets/css/app.css">
    <script src="/assets/js/jquery.min.js"></script>

</head>

<body data-type="login">
    <script src="/assets/js/theme.js"></script>
    <div class="am-g tpl-g">
        <!-- 风格切换 -->
        <div class="tpl-skiner">
            <div class="tpl-skiner-toggle am-icon-cog">
            </div>
            <div class="tpl-skiner-content">
                <div class="tpl-skiner-content-title">
                    选择主题
                </div>
                <div class="tpl-skiner-content-bar">
                    <span class="skiner-color skiner-white" data-color="theme-white"></span>
                    <span class="skiner-color skiner-black" data-color="theme-black"></span>
                </div>
            </div>
        </div>
        <div class="tpl-login">
            <div class="tpl-login-content">
                <div class="tpl-login-logo">
                </div>
                <form class="am-form tpl-form-line-form">
                    <div class="am-form-group">
                        <input type="text" class="tpl-form-input" id="user-name" placeholder="请输入账号">
                    </div>
                    <div class="am-form-group">
                        <input type="password" class="tpl-form-input" id="user-pass" placeholder="请输入密码">
                    </div>
                    <div class="am-form-group" name="verificationCode_div" >
                        <div>
                            <div id="captcha1">
                                <p id="wait1" class="show">正在加载验证码......</p>
                            </div>
                        </div>
                    </div>
                    <div class="am-form-group">
                        <button type="button" id="login" class="am-btn am-btn-primary  am-btn-block tpl-btn-bg-color-success  tpl-login-btn">提交</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <script src="/assets/js/amazeui.min.js"></script>
    <script src="/assets/js/app.js"></script>
    <script src="/js/gt.js"></script>
</body>
<script>
    $(document).ready(function()
    {
        var handler1 = function (captchaObj) {
            // 将验证码加到id为captcha的元素里，同时会有三个input的值用于表单提交

            $("#login").click(function()
            {
                var result = captchaObj.getValidate();
                if(result)
                {
                    login();
                }
                else
                {
                    alert("请先完成验证!");
                }
            });

            function login()
            {
                var account = jQuery("#user-name").val();
                var password = jQuery("#user-pass").val();
                var geetest_challenge = jQuery("[name='geetest_challenge']").val();
                var geetest_validate = jQuery("[name='geetest_validate']").val();
                var geetest_seccode = jQuery("[name='geetest_seccode']").val();

                $.ajax( {
                    url:'/loginSystem',// 跳转到 action
                    data:{
                        account : account,
                        password : password,
                        geetest_challenge : geetest_challenge,
                        geetest_validate : geetest_validate,
                        geetest_seccode : geetest_seccode
                    },
                    type:'post',
                    cache:false,
                    dataType:'json',
                    success:function(data)
                    {
                        if(data.code == 0)
                        {
                            window.location.href="/manage/index";
                        }
                        else
                        {
                            alert("登陆失败！");
                        }
                    },
                    error:function()
                    {
                        alert("异常！");
                    }
                });
            }
            captchaObj.appendTo("#captcha1");
            captchaObj.onReady(function ()
            {
                $("#wait1").hide();
            });
            // 更多接口参考：http://www.geetest.com/install/sections/idx-client-sdk.html
        };
        $.ajax({
            url: "/startCaptcha?t=" + (new Date()).getTime(), // 加随机数防止缓存
            type: "get",
            dataType: "json",
            success: function (data) {
                // 调用 initGeetest 初始化参数
                // 参数1：配置参数
                // 参数2：回调，回调的第一个参数验证码对象，之后可以使用它调用相应的接口
                initGeetest({
                    gt: data.gt,
                    challenge: data.challenge,
                    new_captcha: data.new_captcha, // 用于宕机时表示是新验证码的宕机
                    offline: !data.success, // 表示用户后台检测极验服务器是否宕机，一般不需要关注
                    product: "float", // 产品形式，包括：float，popup
                    width: "100%"
                    // 更多配置参数请参见：http://www.geetest.com/install/sections/idx-client-sdk.html#config
                }, handler1);
            }
        });
    });

</script>
</html>